<extend name="Base/common"/>
<block name="side">
    <div class="sidebar">
        <ul class="side-nav">
            <li >
                <a href="{:U('Home/Dealer/add')}" <if condition="$action eq 'add'">class="active"</if> ><i class="fa-new"></i> 添加记录</a>
            </li>
            <li>
                <a href="{:U('Home/Dealer/index')}"  <if condition="$action eq 'index'">class="active"</if> ><i class=" fa-history"></i> 历史记录</a>
            </li>
            <li>
                <a href="{:U('User/profile')}" <if condition="$action eq 'profile'">class="active"</if> ><i class="fa-pass"></i> 修改密码</a>
            </li>
            <li>
                <a href="{:U('User/logout')}" <if condition="$action eq 'logout'">class="active"</if> ><i class="fa-back"></i> 退出系统</a>
            </li>
        </ul>
    </div>
</block>
<block name="body">

    <div id="main-content">
        <div id="main" class="main" style="min-height: 380px;">
            <div class="row">
                <h1>添加记录</h1>
                <div class="admin">
                    欢迎 <span style="color: red;">{:get_nickname()}</span> 登陆系统
                </div>
                <include file="Public/dashboardhd"/>
            </div>
            <style>
                .item-label{margin-bottom:0;}
                .uploadify-button{
                    text-align: center;
                    background: #424242;
                    color: white;
                }
                .item-label{
                    margin-top: 0px;
                }
                .form-item{
                    margin-top: 10px;
                }
                select{
                    padding: 10px !important;
                }
                .flex{
                    display: flex;
                    align-items: center;
                }
                .flex > *{
                    margin-right: 5px;
                }
                .img-container{
                    display: flex;
                    align-items: center;
                }
                .img-container .img {
                    margin: 5px;
                    cursor: pointer;
                    position: relative;
                }
                .img-container .img img{
                    width: 250px;
                }
                .dele{
                    font-size: 20px;
                    background: red;
                    height: 20px;
                    width: 20px;
                    display: block;
                    line-height: 18px;
                    text-align: center;
                    border-radius: 10px;
                    color: white;
                    position: absolute;
                    top: 0;
                    right: 0;
                }

            </style>
            <form id="add-form" class="add" action="__SELF__" method="post" enctype="multipart/form-data" style="margin-top:0;">
                <input type="hidden" name="type" value="2">
                <label class="item-label red">* 以下信息请认真核对后填写，信息不能为空</label>

                <div class="form-item">
                    <label class="item-label">活动形式：</label>
                    <select class="text" name="type" style="width: 200px;">
                        <option value="0" selected>请选择</option>
                        <option value="1">形式1：更换4条轮胎减免1000元</option>
                        <option value="2">形式2：更换2条轮胎减免350元，每更换4条轮胎减免700元</option>
                    </select>
                </div>
                <div class="form-item">
                    <label class="item-label">牌照号码：<span id="error-platenumber" class="red"></span></label>
                    <div class="controls">
                        <input class="text " type="text" name="platenumber_1" style="width:40px;"> &bull;
                        <input class="text " type="text" name="platenumber_2"  style="width:203px;">
                        <label class="item-label" style="display:inline;margin-left:10px;"><span class="red">*</span> 例：<span style="padding: 2px 3px;border:solid 1px gray;">吉A</span> <span style="padding: 2px 3px;border:solid 1px gray;">12345</span></label>
                    </div>
                </div>
                <div class="form-item">
                    <label class="item-label">选择车型与轮胎型号：<span id="error-car" class="red"></span><span id="error-tyre" class="red"></span></label>
                    <div class="controls flex">
                        <select class="text" name="car">
                            <option value="0">车型</option>
                            <volist name="cars" id="car">
                                <option value="{$car.car}">{$car.car}</option>
                            </volist>
                        </select>
                        <select class="text" name="tyre" style="width: 220px;">
                            <option value="0">轮胎型号</option>
                        </select>
                        <!--<input class="text" name="guige" style="width: 220px;">-->
                        <!--</input>-->
                        <span class="red">*</span> 先选择车型，然后选择轮胎型号</label>
                    </div>
                </div>
                <div class="form-item">
                    <label class="item-label">轮胎规格：</label>
                    <div class="controls flex">
                        <input class="text" type="text" name="guige" style="width: 70px;" >
                            <!--<option value="0">轮胎规格</option>-->
                        </input>
                    </div>
                </div>
                <div class="form-item">
                    <label class="item-label">更换条数：<span id="error-number" class="red"></span></label>
                    <select class="text" name="number" disabled style="width: 100px;">
                        <option value="0" selected>请选择</option>
                        <option value="1">2条</option>
                        <option value="2">4条</option>
                    </select>
                    <span class="red">*</span> 形式二下选择4条时请同时上传两张体现优惠350元的结算单！
                </div>
                <div class="form-item">
                    <label class="item-label">厂家补贴金额：</label>
                    ￥
                    <input class="text " type="text" readonly="readonly" name="price" style="width:70px;">
                </div>
                <div class="form-item">
                    <label class="item-label">上传结算单：<span id="error-images" class="red"></span></label>
                    <div class="controls">
                        <input id="upload_file" type="file" style="width:306px;" ><label class="item-label" style="display:inline;margin-left:10px;">
                        <input type="hidden" name="images"/>
                        <div class="img-container">
                        </div>
                        <span class="red">*</span> 每张扫描件须小于5M,可同时上传多张结算单</label>
                    </div>
                </div>

                <div class="login_btn_panel">
                    <button id="submit-btn" class="btn2" type="submit">提交</button>
                    <button class="btn1" type="reset">重置</button>
                </div>
            </form>

        </div>
    </div>

    <script src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <script>
        $(document).ready(function(){
            // 总剩余配额提醒
            if ( !( parseInt($(".dashboard [data-remain]").text())>0 ) ) {
                alert('您的配额已用完');
                $("select").attr('disabled', 'disabled');
                $("input").attr('disabled', 'disabled');
                $("button").attr('disabled', 'disabled');
                return false;
            }
            // 形式一剩余配额
            if ( !( parseInt($(".dashboard [data-remain2]").text())>0 ) ) {
                alert('您的形式一配额已用完');
                $("input[name='type']").val(2);
                $("select[name='type']").val(2).trigger("change");
                $("select[name='type']").attr('disabled','disabled');
                $("select[name='number']").removeAttr('disabled');
            }
            //形式二剩余配额
            if ( !( parseInt($(".dashboard [data-remain3]").text())>0 ) ) {
                alert('您的形式二配额已用完');
                $("input[name='type']").val(1);
                $("select[name='type']").val(1).trigger('change');
                $("select[name='type']").attr('disabled','disabled');
                $("select[name='number']").removeAttr('disabled');
            }

            // 活动形式选择
            $("select[name='type']").on('change',function(){

                var $this, $price, $number, $type;
                $type = parseInt($(this).val());


                // 固定轮胎条数
                if ($type === 1) {
                    $("select[name='number'] option[value='1']").attr('disabled', 'disabled');
                    $("select[name='number']").val(2).trigger('change');
//                    $("select[name='number']").attr('disabled','disabled');
                    $("select[name='number']").removeAttr('disabled');
                } else if($type === 2){
//                    $("select[name='number']").val(0);
                    $("select[name='number'] option[value='1']").removeAttr('disabled');
                    $("select[name='number']").val(1).trigger('change');
                    $("select[name='number']").removeAttr('disabled');
                }
                else {
                    $("select[name='number']").removeAttr('disabled');
                }


                // 计算金额
                console.log('type='+$type);
                $price = $type===1?1000:350;
                console.log('price='+$price);
                $number = $type===1?1:parseInt($("select[name='number']").val());
                console.log('number='+$number);
                console.log('总价：'+($price*$number));
                $("input[name='price']").val(parseFloat($price * $number));
            });
            /**
             * 车型选择
             * 先从控制器获取车型数据，填充第一个select表单；选中表单时，根据车型获取轮胎数据，填充
             * 第二个select表单
             */
            $("select[name='car']").on('change',function(){

				var guigesinput = $("input[name='guige']");
                $("input[name='guige']").val();
//				guigeinput.html('<option value="">轮胎规格</option>');

                var $this = $(this), $car, $tyre, $callback, $data, $url, $number;
                // 车型选择元素
                $car = $this.val();
                // 轮胎选择元素
                $tyre = $("select[name='tyre']");
                // 轮胎条数选择元素
                $number = $("select[name='number']");
                // 数据
                $data = {car:$car, action:"getTyres"};
                // url
                $url = "{:U('Dealer/api')}";
                // 定义回调函数
                $callback = function($res){
                    if ( $res.status ==1&& $res.data ) {
                        //活动形式
                        // 轮胎型号选择
                        $tyre.empty();
                        $tyre.append("<option value='0' data-price='0.00'> -- 请选择 -- </option>");
                        for( var i in $res.data ) {
                            $tyre.append("<option value='"+ $res.data[i].id +"' data-price='"+ $res.data[i].price +"' data-type='"+$res.data[i].type+"'>"+$res.data[i].brand+" "+ $res.data[i].number +"</option>");
                        }
                        $("select[name='tyre']").trigger('change');
                        // 轮胎条数
//                        $("select[name='number']").val("1").trigger('change');
                    }
                };
                // 请求轮胎数据,执行回调函数
                send_data($data, $url, $callback);
            });

            /**
             * 轮胎型号选择
             */

            $("select[name='tyre']").on('change',function(){
				var data_type = $(this).find("option:selected").attr("data-type");
				if(data_type) {
				var guigeinput = $("input[name='guige']");
                    $("input[name='guige']").val(data_type);


//
				}
            });
			/*
            $("select[name='tyre']").on('change',function(){
//                var $this, $price, $type, $number;
//                $this = $(this);
//                $type = parseInt($("select[name='type']").val());
//                $price = $type===1?1000:350;
//                $number = $type===1?1:$tyre.val();
                // 轮胎条数触发
//                $("select[name='number']").trigger('change');
            });
			*/


            /**
             * 轮胎数量选择
             */
            $("select[name='number']").on('change',function(){
                var $this, $price, $tyre, $type, $number;
                $type = parseInt($("select[name='type']").val());
                $price = $type===1?1000:350;
                $number = $type===1?1:$("select[name='number']").val();
                $("input[name='price']").val(parseFloat($price * $number));
            });





            // 上传图片
            $("#upload_file").uploadify({
                'swf'   :   '/Public/static/uploadify/uploadify.swf',
                'uploader':'{:U("Dealer/upload",array("session_id"=>session_id()))}',
                'buttonText':'上传结算单',
                'fileTypeExts'    : '*.jpg; *.png; *.gif;',
                'onUploadSuccess':function(file,data){
                    var $data = $.parseJSON(data), $id = $data.id, $path = $data.path, $input=$("input[name='images']"), $ids = $input.val(), $ids_new;
                    if ( $data.id >0 ){
                        // 获取ids字符串
                        var $dis_new = arr2str(push_arr(str2arr($ids), $id));
                        // 表单赋值
                        $input.val($dis_new);
                        // 增加图片元素
                        $("div.img-container").append("<div class='img' data-id='" +$id+ "' data-src='"+ $path +"'><img src='"+ $path +"'/><span class='dele' data-id='" +$id+ "' title='删除'>&times;</span></div>");
                    } else {
                        if ($data.status == 0){
                            alert('文件大小可能超出限制');
                        }
                        console.log("上传失败");
                    }
                },
                'onUploadError'   : function(){
                    console.log("上传失败");
                }
            });


            // 图片删除
            $("body").on("click",".dele",function(e){
                var $this = $(this), $id = $this.data("id"), $input = $("input[name='images']"), $ids = $input.val(), $ids_new;
                // 获取ids_new
                $ids_new = arr2str(pop_arr(str2arr($ids),$id));
                // 表单赋值
                $input.val($ids_new);
                // 删除图片元素
                $this.parent(".img").remove();
                // 阻止事件冒泡(弹出遮罩层)
                e.stopPropagation();
            });

        });

        // 字符串转数组
        function str2arr($str){
            return $str.split(",");
        }

        // 数组转字符串
        function arr2str($arr){
            return $arr.join(",");
        }

        // 数组添加新元素
        function push_arr($arr, $e){
            //增加元素,可能会产生重复
            $arr.push($e);

            // 数组去重，$res
            var $res = [], $obj = {}, $i = 0;
            do{
                if ( $arr[$i] && !$obj[$arr[$i]]) {
                    $res.push($arr[$i]);
                    $obj[$arr[$i]] = 1;
                }
                $i++;
            } while($i < $arr.length);
            return $res;
        }

        // 数组删除元素
        function pop_arr($arr, $e){
            var $res = [];
            // 排除掉要删除的元素，生成新的数组并返回
            for( var $i=0; $i<$arr.length; $i++ ){
                if ( $e != $arr[$i]) {
                    $res.push($arr[$i]);
                }
            }
            return $res;
        }

        /**
         * 字段验证
         * @type {RegExp}
         */
//        var proxy_number_reg = /^[0-9]\-20[1-9][0-9][0-9]{7,8}$/;// 3-20170301128 任务委托书编号
        var platenumber_1reg = /^[\u4e00-\u9fa5][A-Za-z]$/;//车牌号前段
        var platenumber_2reg = /^[A-Za-z0-9]{5}$/;//车牌号后段
        var error = {};

        // 表单提交前验证字段
        $("body").on("click","#submit-btn",function(){
            $("select[name='number']").removeAttr('disabled');
            return check();
        });
        //        check();

        //验证函数
        function check(){
//            console.log("检查");

            // 验证任务委托书编号
//            proxy_number_reg.test($("input[name='proxy_number']").val())?(error["proxy_number"] = null):(error["proxy_number"] = "任务委托书编号不能为空");
//            $("#error-proxy_number").text(error["proxy_number"]);
//            console.log(error["proxy_number"]);
            // 判断形式是否选择
            if (!($("select[name='type']").val() > 0)){
                alert('请选择活动形式');
                return false;
            }

            // 验证车型型
            var car = $("select[name='car']").val();
            car!=0?(error["car"] = null):(error["car"]="请确认车型是否选择正确 ");
            $("#error-car").text(error["car"]);
//            console.log(error["car"]);
            //提示语



            // 验证轮胎型
            var tyre_id = $("select[name='tyre']").val();
            tyre_id>0?(error["tyre"] = null):(error["tyre"]="请确认轮胎型号是否选择正确");
            $("#error-tyre").text(error["tyre"]);
//            console.log(error["tyre"]);

            // 验证车牌号
            (platenumber_1reg.test($("input[name=platenumber_1]").val()) && platenumber_2reg.test($("input[name=platenumber_2]").val()))?(error["platenumber"] = null):(error["platenumber"]="牌照号码错误");
            $("#error-platenumber").text(error["platenumber"]);
//            console.log(error["platenumber"]);


            // 验证轮胎条数
//            var number = $("select[name='number']").val();
//            console.log(number !=0);
//            number!=0?(error["number"] = null):(error["number"]="请选择轮胎条数 ");
//            $("#error-number").text(error["number"]);

//             验证任务委托书
            var images = $("input[name=images]");
            images.val()?(error["images"] = null):(error["images"]="结算单不能为空");
            $("#error-images").text(error["images"]);
            var images_arr = images.val().split(',');
            if ($("select[name='type']").val()==1 && !(images_arr.length!=1)) {
                error['Iimages'] = '形式2下选择4条时请上传两张结算单！';
                $("#error-images").text(error["images"]);
            }

//            console.log(error["images"]);

//            if( !error["proxy_number"] ){
//                console.log("proxy_number 正确");
//            }else{
//                return false;
//            }
//            if ( !( parseInt($(".dashboard [data-remain]").text())>= parseInt($("select[name='number']").val()) ) ) {
//                alert('您的配额不足');
//                return false;
//            }

            if( !error["car"] ){
//                console.log("tyre 正确");
            }else{
                return false;
            }
            if( !error["tyre"] ){
//                console.log("tyre 正确");
            }else{
                return false;
            }
            if( !error["platenumber"] ){
//                console.log("platenumber 正确");
            }else{
                return false;
            }
            if( !error["images"] ){
//                console.log("images 正确");
            }else{
                return false;
            }

            return true;

        }
    </script>

    <include file="var"/>


</block>
